<template>
	<view class="page-container">
		<!-- 头部标题 -->
		<view class="header">
			<view class="title">申请审核结果</view>
			<view class="subtitle">您的入驻申请审核状态更新</view>
		</view>

		<!-- 主要内容卡片 -->
		<view class="main-card">
			<!-- 状态图标部分 -->
			<view class="status-section">
				<view class="float-icon">
					<view class="icon-container">
						<van-icon name="close" size="48" color="#fff" />
					</view>
				</view>
				<view class="status-title">入驻申请未通过审核</view>
				<view class="status-desc">很遗憾您的申请未通过审核，请根据以下提示修改后重新提交</view>
			</view>

			<!-- 拒绝原因详情 -->
			<view class="content-section">
				<view class="reason-section">
					<view class="section-title">
						<view class="title-icon">
							<van-icon name="warning" color="#fb7185" size="20" />
						</view>
						<text>审核未通过原因分析</text>
					</view>

					<view class="reason-grid">
						<!-- 原因卡片1 -->
						<view class="reason-card">
							<view class="card-content">
								<view class="card-icon">
									<van-icon name="photo" color="#fb7185" size="20" />
								</view>
								<view class="card-text">
									<view class="card-title">资格证书问题</view>
									<view class="card-desc">资格证书清晰度不足，请上传高清扫描件</view>
								</view>
							</view>
						</view>

						<!-- 原因卡片2 -->
						<view class="reason-card">
							<view class="card-content">
								<view class="card-icon">
									<van-icon name="bag" color="#fb7185" size="20" />
								</view>
								<view class="card-text">
									<view class="card-title">工作经历证明</view>
									<view class="card-desc">工作经历证明文件不完整</view>
								</view>
							</view>
						</view>

						<!-- 原因卡片3 -->
						<view class="reason-card">
							<view class="card-content">
								<view class="card-icon">
									<van-icon name="idcard" color="#fb7185" size="20" />
								</view>
								<view class="card-text">
									<view class="card-title">身份信息不一致</view>
									<view class="card-desc">身份证信息与证件照片不一致</view>
								</view>
							</view>
						</view>

						<!-- 原因卡片4 -->
						<view class="reason-card">
							<view class="card-content">
								<view class="card-icon">
									<van-icon name="question" color="#fb7185" size="20" />
								</view>
								<view class="card-text">
									<view class="card-title">其他注意事项</view>
									<view class="card-desc">请确保所有信息真实有效</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 修改建议 -->
				<view class="suggestion-section">
					<view class="section-title">
						<view class="title-icon blue">
							<van-icon name="setting" color="#fb7185" size="16px" />
						</view>
						<text>修改建议</text>
					</view>

					<view class="suggestion-card">
						<view class="suggestion-content">
							<view class="suggestion-text">
								<view class="suggestion-title">如何提高审核通过率？</view>
								<view class="suggestion-list">
									<view class="list-item">
										<view class="list-dot"></view>
										<text>使用专业扫描设备或手机扫描APP拍摄证件</text>
									</view>
									<view class="list-item">
										<view class="list-dot"></view>
										<text>确保所有文件四角完整显示，无反光</text>
									</view>
									<view class="list-item">
										<view class="list-dot"></view>
										<text>检查姓名、身份证号等关键信息一致性</text>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>

				<!-- 操作按钮 -->
				<view class="action-buttons">
					<van-button type="danger" block custom-style="height: 50px; border-radius: 12px;"
						@click="handleReapply">
						<van-icon name="edit" size="18" style="margin-right: 8px;" />
						重新申请
					</van-button>
					<view class="contact-section">
						<view class="contact-text">需要帮助？请联系我们的支持团队</view>
						<!-- <view class="contact-methods">
							<view class="contact-item" @click="handleEmail">
								<van-icon name="envelop" size="14" color="#f43f5e" style="margin-right: 4px;" />
								<text>support@edu.com</text>
							</view>
							<view class="contact-divider">|</view>
							<view class="contact-item" @click="handleCall">
								<van-icon name="phone" size="14" color="#f43f5e" style="margin-right: 4px;" />
								<text>400-123-4567</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 审核流程说明 -->
		<view class="process-card">
			<view class="process-title">审核流程说明</view>

			<view class="timeline-container">
				<view class="timeline">
					<view class="timeline-item">
						<view class="timeline-icon">
							<van-icon name="upgrade" color="#3b82f6" size="20" />
						</view>
						<view class="timeline-text">提交申请</view>
					</view>

					<view class="timeline-connector"></view>

					<view class="timeline-item">
						<view class="timeline-icon">
							<van-icon name="search" color="#3b82f6" size="20" />
						</view>
						<view class="timeline-text">初步审核</view>
					</view>

					<view class="timeline-connector"></view>

					<view class="timeline-item">
						<view class="timeline-icon">
							<van-icon name="todo-list" color="#3b82f6" size="20" />
						</view>
						<view class="timeline-text">详细审核</view>
					</view>

					<view class="timeline-connector"></view>

					<view class="timeline-item">
						<view class="timeline-icon">
							<van-icon name="close" color="#fb7185" size="20" />
						</view>
						<view class="timeline-text">审核结果</view>
					</view>
				</view>
			</view>

			<view class="process-desc">
				<view>通常审核需要1-3个工作日完成</view>
				<view>重新提交申请后，我们会优先处理您的审核</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 可以在这里添加数据
			}
		},
		methods: {
			handleReapply() {
				uni.redirectTo({
					url: '/pages/my/Settled'
				});
				// 实际应用中这里可以跳转到修改页面
			},

			handleEmail() {
				uni.showModal({
					title: '联系支持',
					content: '是否要发送邮件到 support@edu.com?',
					success(res) {
						if (res.confirm) {
							// 实际应用中这里可以调用邮件客户端
						}
					}
				});
			},
			handleCall() {
				uni.showModal({
					title: '联系支持',
					content: '是否要拨打 400-123-4567?',
					success(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: '4001234567'
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	/* 全局样式 */
	page {
		background-color: #f9fafb;
		padding: 16px;
		box-sizing: border-box;
	}

	/* 动画效果 */
	@keyframes float {
		0% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-8px);
		}

		100% {
			transform: translateY(0px);
		}
	}

	.float-icon {
		animation: float 2s ease-in-out infinite;
	}

	/* 页面容器 */
	.page-container {
		max-width: 100%;
		margin: 0 auto;
	}

	/* 头部标题 */
	.header {
		text-align: center;
		margin-bottom: 40px;
	}

	.header .title {
		font-size: 24px;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 8px;
	}

	.header .subtitle {
		font-size: 16px;
		color: #6b7280;
	}

	/* 主卡片样式 */
	.main-card {
		background-color: #fff;
		border-radius: 16px;
		overflow: hidden;
		margin-bottom: 24px;
		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	/* 状态部分 */
	.status-section {
		background: linear-gradient(to right, #fff1f2, #fce7f3);
		padding: 32px 24px;
		box-sizing: border-box;
		text-align: center;
	}

	.icon-container {
		width: 96px;
		height: 96px;
		background: linear-gradient(to bottom right, #f43f5e, #ec4899);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 24px;
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	}

	.status-title {
		font-size: 20px;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 8px;
	}

	.status-desc {
		font-size: 14px;
		color: #6b7280;
		max-width: 500px;
		margin: 0 auto;
	}

	/* 内容部分 */
	.content-section {
		padding: 24px;
		box-sizing: border-box;
	}

	/* 部分标题 */
	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 24px;
		display: flex;
		align-items: center;
	}

	.title-icon {
		width: 32px;
		height: 32px;
		background-color: #fff1f2;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.title-icon.blue {
		background-color: #dbeafe;
	}

	/* 原因网格 */
	.reason-grid {
		display: flex;
		flex-wrap: wrap;
		margin: -8px;
	}

	.reason-card {
		width: 50%;
		padding: 8px;
		box-sizing: border-box;
		box-sizing: border-box;
	}

	@media (max-width: 480px) {
		.reason-card {
			width: 100%;
		}
	}

	.reason-card .card-content {
		background-color: #f9fafb;
		border-radius: 12px;
		padding: 16px;
		box-sizing: border-box;
		border-left: 4px solid #f43f5e;
		height: 100%;
	}

	.card-icon {
		width: 40px;
		height: 40px;
		background-color: #fff1f2;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16px;
	}

	.card-content {
		display: flex;
		align-items: flex-start;
	}

	.card-text {
		flex: 1;
	}

	.card-title {
		font-size: 14px;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 4px;
	}

	.card-desc {
		font-size: 12px;
		color: #6b7280;
	}

	/* 建议卡片 */
	.suggestion-card {
		background-color: #eff6ff;
		border-radius: 12px;
		padding: 16px;
		box-sizing: border-box;
	}

	.suggestion-content {
		display: flex;
		flex-direction: column;
	}

	@media (min-width: 480px) {
		.suggestion-content {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}

	.suggestion-text {
		flex: 1;
	}

	.suggestion-title {
		font-size: 14px;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 12px;
	}

	.suggestion-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.list-item {
		display: flex;
		align-items: flex-start;
	}

	.list-dot {
		width: 6px;
		height: 6px;
		background-color: #3b82f6;
		border-radius: 50%;
		margin-top: 6px;
		margin-right: 8px;
		flex-shrink: 0;
	}

	.doc-image {
		width: 96px;
		height: 96px;
		opacity: 0.7;
		margin-left: 16px;
	}

	/* 操作按钮 */
	.action-buttons {
		padding-top: 16px;
		box-sizing: border-box;
	}

	.contact-section {
		text-align: center;
		padding-top: 24px;
		box-sizing: border-box;
	}

	.contact-text {
		font-size: 12px;
		color: #6b7280;
		margin-bottom: 8px;
	}

	.contact-methods {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}

	.contact-item {
		display: flex;
		align-items: center;
		color: #f43f5e;
		font-weight: 500;
		font-size: 14px;
	}

	.contact-divider {
		color: #e5e7eb;
	}

	/* 流程卡片 */
	.process-card {
		background-color: #fff;
		border-radius: 16px;
		padding: 24px;
		box-sizing: border-box;
		margin-bottom: 24px;
		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}
	.suggestion-section{
		margin-top: 10rpx;
	}

	.process-title {
		font-size: 18px;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 24px;
		text-align: center;
	}

	.timeline-container {
		margin-bottom: 24px;
	}

	.timeline {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.timeline-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
	}

	.timeline-icon {
		width: 48px;
		height: 48px;
		background-color: #dbeafe;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
	}

	.timeline-text {
		font-size: 12px;
		font-weight: 500;
		color: #1f2937;
		text-align: center;
	}

	.timeline-connector {
		height: 2px;
		background-color: #bfdbfe;
		flex: 1;
		margin: 0 4px;
	}

	.process-desc {
		font-size: 12px;
		color: #6b7280;
		text-align: center;
		line-height: 1.6;
	}
</style>